﻿
@{
    ViewBag.Title = "默认回复";
}
@section css
{
    <link href="~/Content/css/imageText/main.css" rel="stylesheet" />
}

<div class="page-content" style="min-height: auto;">
    <!-- BEGIN PAGE CONTAINER-->
    <div class="container-fluid">

        <div class="row-fluid">

            <div class="row-fluid search-forms search-default">
            </div>
            <div class="tabbable tabbable-custom boxless">
                <div class="tab-content">
                    <div class="tab-pane active" id="tab_1">
                        <div class="portlet box blue">

                            <div class="portlet-body form">
                                <!-- BEGIN FORM-->
                                <form id="editform" class="form-horizontal">
                                    <input type="hidden" value="@ViewBag.Id" id="txt_AutoReplyId" name="AutoReplyId" />
                                    <input type="hidden" name="ReplyType" id="txt_ReplyType" value="1" />
                                    <input type="hidden" name="ImageTextId" id="txt_ImageTextId" value="0" />
                                    <input type="hidden" name="GroupId" id="txt_GroupId" value="0" />
                                    <div class="layui-form-item">
                                        <label class="layui-form-label"></label>
                                        <div class="layui-btn-group">
                                            <button type="button" id="btn-text" class="layui-btn layui-btn-small layui-btn-normal" onclick="changeType(1)">文本</button>
                                            <button type="button" id="btn-imagetext" class="layui-btn layui-btn-small" onclick="changeType(2)">图文</button>
                                        </div>
                                    </div>

                                    <div class="layui-form-item reply-text">
                                        <label class="layui-form-label">回复文本</label>
                                        <div class="layui-input-block">
                                            <textarea class="span6 m-wrap" rows="8" cols="70" name="Content" style="border: 1px solid #ccc;"
                                                      id="txt_Content"></textarea>
                                        </div>
                                    </div>
                                    <div class="layui-form-item reply-imagetext" style="display: none">
                                        <label class="layui-form-label">回复图文</label>
                                        <div class="layui-input-block">
                                            <div class="controls" id="div_ReplyImageText" style="width: 350px">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-input-block">
                                        <button class="layui-btn" id="btn-save" type="button" onclick="Save()">立即提交</button>
                                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                    </div>
                                </form>
                                <!-- END FORM-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END EXAMPLE TABLE PORTLET-->
        </div>
        <!---->
    </div>
    <!-- END PAGE CONTAINER-->
</div>
<!-- END PAGE -->

@section htmls
{
    <div id="wechatLayer" style="display:none;padding:15px">
        <div id="div_imagetext">
            <div class="low" id="col0">
            </div>
            <!--low 02 -->
            <div class="low" id="col1">
            </div>
        </div>
    </div>
}

@section scripts
{
    <script>

        var form = null;
        var layer = null;
        var clickType = 1;
        var index = null;
        var canPost = true;
        layui.use('layer', function () {
            layer = layui.layer;
        });
        
        function changeType(replyType) {
            clickType = replyType;
            $("#txt_ReplyType").val(replyType);
            if (replyType == 1) {
                $("#btn-text").addClass("layui-btn-normal");
                $("#btn-imagetext").removeClass("layui-btn-normal");
                $(".reply-text").show();
                $(".reply-imagetext").hide();
            }
            else {
                $(".reply-text").hide();
                $(".reply-imagetext").show();
                $("#btn-text").removeClass("layui-btn-normal");
                $("#btn-imagetext").addClass("layui-btn-normal");
                $(".reply-text").hide();

                //读图文列表
                var url = "/Wechat/WechatMemuAjax?sub=getImageTextList";
                index = layer.load(1);
                $.post(url, function (datas) {
                    $("#col0").html("");
                    $("#col1").html("");
                    var data = JSON.parse(datas)
                    var col = 1;
                    if (data.status) {
                        for (var i = 0; i < data.data.length; i++) {
                            var item = data.data[i];
                            var colHtml = new Array();
                            colHtml.push("<div class=\"ct_box box_radius\" ")
                            if (item.type == 0) {
                                colHtml.push(" onclick=\"SelectedImageTextOrGroup(0," + item.id + ")\">");
                            }
                            else {
                                colHtml.push(" onclick=\"SelectedImageTextOrGroup(" + item.groupId + ",0)\">");
                            }
                            colHtml.push("<div class=\"ct_box_nav\">")
                            colHtml.push("<h3>" + item.banner.title + "</h3>")
                            colHtml.push("<h4>" + item.createDate + "</h4>")
                            colHtml.push("</div>")
                            colHtml.push("<div class=\"ct_banner\">")
                            colHtml.push("<a href=\"javascript:void(0)\">")
                            colHtml.push("<p>" + item.banner.title + "</p>")
                            colHtml.push("<img src=\"" + item.banner.picUrl + "\"/>")
                            colHtml.push("</a>")
                            colHtml.push("  </div>")
                            if (item.type == 0) {
                                colHtml.push("<div class=\"ct_text\">" + item.banner.title + "</div>")
                            } else {
                                colHtml.push("<div class=\"ct_duo\">")
                                for (var j = 0; j < item.list.length; j++) {
                                    var child = item.list[j]
                                    colHtml.push("<dl>")
                                    colHtml.push("<a href=\"javascript:void(0)\">")
                                    colHtml.push("<dt>" + child.title + "</dt>")
                                    colHtml.push("<dd>")
                                    colHtml.push("<img src=\"" + child.picUrl + "\"/>    ")
                                    colHtml.push("</dd>")
                                    colHtml.push("<div class=\"clear\"></div>")
                                    colHtml.push("</a>")
                                    colHtml.push("</dl>")
                                }

                                colHtml.push("<div class=\"clear\"></div>")
                                colHtml.push("</div>")
                            }

                            col = col % 2
                            $("#col" + col).append(colHtml.join(''))
                            col++;
                        }
                        layer.open({
                            type: 1,
                            shade: 0.1,
                            title: '选择回复图文',
                            area: ['750px', '620px'],
                            closeBtn: 0, //不显示关闭按钮
                            anim: 2,
                            shadeClose: true, //开启遮罩关闭
                            content: $("#wechatLayer"),
                        });
                    } else {
                        layer.msg(data.message);
                    }
                    layer.close(index)
                }, "json");
            }
        }

        function SelectedImageTextOrGroup(groupId, imagetextId) {
            $("#txt_Content").val("");
            $("#txt_ImageTextId").val(imagetextId);
            $("#txt_GroupId").val(groupId);
            layer.closeAll('page')
            GetImageTextOrGroup();
        }

        function GetImageTextOrGroup() {
            var url = "/Wechat/WechatMemuAjax?sub=getImageTextList";
            var params = {};
            params.Id = $("#txt_ImageTextId").val();
            params.GroupId = $("#txt_GroupId").val();
            index = layer.load(1);
            $.post(url,
                params
                , function (datas) {
                    var data = JSON.parse(datas);
                    if (data.status) {
                        if (data.data.length > 0) {
                            var item = data.data[0];
                            var colHtml = new Array();
                            colHtml.push("<div class=\"ct_box box_radius\" >")
                            colHtml.push("<div class=\"ct_box_nav\">")
                            colHtml.push("<h3>" + item.banner.title + "</h3>")
                            colHtml.push("</div>")
                            colHtml.push("<div class=\"ct_banner\">")
                            colHtml.push("<a href=\"javascript:void(0)\">")
                            colHtml.push("<p>" + item.banner.title + "</p>")
                            colHtml.push("<img src=\"" + item.banner.picUrl + "\"/>")
                            colHtml.push("</a>")
                            colHtml.push("  </div>")
                            if (item.type == 0) {
                                colHtml.push("<div class=\"ct_text\">" + item.banner.title + "</div>")
                            } else {
                                colHtml.push("<div class=\"ct_duo\">")
                                for (var j = 0; j < item.list.length; j++) {
                                    var child = item.list[j]
                                    colHtml.push("<dl>")
                                    colHtml.push("<a href=\"javascript:void(0)\">")
                                    colHtml.push("<dt>" + child.title + "</dt>")
                                    colHtml.push("<dd>")
                                    colHtml.push("<img src=\"" + child.picUrl + "\"/>    ")
                                    colHtml.push("</dd>")
                                    colHtml.push("<div class=\"clear\"></div>")
                                    colHtml.push("</a>")
                                    colHtml.push("</dl>")
                                }

                                colHtml.push("<div class=\"clear\"></div>")
                                colHtml.push("</div>")
                            }
                        }
                        $("#div_ReplyImageText").html(colHtml.join(''));

                    }
                    else {
                        layer.msg(data.message);
                    }
                    layer.close(index)
                }, "json");
        }

        function Save() {
            var imagetextid = $("#txt_ImageTextId").val();
            var groupid = $("#txt_GroupId").val();
            var replymsg = $.trim($("#txt_Content").val());
            if (clickType == 1) {
                $("#txt_ImageTextId").val(0);
                $("#txt_GroupId").val(0);
                $("#div_ReplyImageText").html('');
                if (replymsg == "") {
                    layer.msg("请设置回复文本内容");
                    return;
                }
                else if (replymsg.length > 500) {
                    layer.msg("回复文本内容过长,请在500字以内");
                    return;
                }

            }
            else if (clickType == 2 && parseInt(imagetextid) == 0 && parseInt(groupid) == 0) {
                layer.msg("请选择要回复的图文");
                return;
            }

            if (canPost) {
                canPost = false;
                $("#btn-save").html("正在执行,请等待....")
                var url = "/Wechat/WechatMemuAjax?sub=insertOrUpdateReply";
                var params = $("#editform").serialize();
                index = layer.load(1);
                $.post(url, params, function (datas) {
                    var data = JSON.parse(datas)
                    if (data.status) {
                        var url = "/Wechat/AutoReply?Id=" + data.data;
                        setTimeout(function () {
                            document.location.href = url;
                        }, 2000);
                    } else {
                        layer.msg(data.message);
                        canPost = true;
                    }
                    $("#btn-save").html("立即提交")
                    layer.close(index)
                }, "json");
            }
        }

    </script>
}